<!--  -->
<template>
  <div class="profile-container">
    <div class="nav-bar">个人中心</div>
    <div class="header">
      <!-- 未登录 -->
      <div class="hasLogin" v-if="userInfo.loginStatus">
        <div class="user-avatar">
          <img :src="userInfo.avatarUrl" alt="用户头像" />
        </div>
        <div class="user-name">
          <p>用户-{{ userInfo.username }}</p>
          <p>普通会员</p>
        </div>
      </div>
      <div class="noLogin" v-else>
        <div class="btn" @click="toLogin">登录 / 注册</div>
      </div>
    </div>
    <div class="divider"></div>
    <!-- 订单列表 -->
    <ul class="order-list" v-if="userInfo.loginStatus">
      <li class="order-item">
        <img src="../../assets/images/profile/all.png" alt="" />
        <p>全部</p>
      </li>
      <li class="order-item">
        <img src="../../assets/images/profile/daifukuan.png" alt="" />
        <p>待付款</p>
      </li>
      <li class="order-item">
        <img src="../../assets/images/profile/daifahuo.png" alt="" />
        <p>待发货</p>
      </li>
      <li class="order-item">
        <img src="../../assets/images/profile/daishouhuo.png" alt="" />
        <p>待收货</p>
      </li>
      <li class="order-item">
        <img src="../../assets/images/profile/daipingjia.png" alt="" />
        <p>待评价</p>
      </li>
    </ul>
    <div class="divider"></div>
    <!-- 个人中心 -->
    <div class="personal-center">
      <van-cell class="list-title">个人中心</van-cell>
      <van-cell-group>
        <van-cell title="我的拼团" icon="location" is-link />
        <van-cell title="我的茶币" icon="like" is-link />
        <van-cell title="我的收藏" icon="star" is-link />
        <van-cell title="地址管理" icon="phone" is-link />
      </van-cell-group>
    </div>
    <!-- 分割线 -->
    <div class="divider"></div>
    <!-- 优惠福利-->
    <div class="preferential-benefits">
      <van-cell class="list-title">优惠福利</van-cell>
      <van-cell-group>
        <van-cell title="优惠券" icon="setting" is-link />
        <van-cell title="茶币商城" icon="fire" is-link />
      </van-cell-group>
    </div>
    <!-- 分割线 -->
    <div class="divider"></div>
    <!-- 专属服务-->
    <div class="exclusive-services">
      <van-cell class="list-title">专属福利</van-cell>
      <van-cell-group>
        <van-cell title="我的客服" icon="comment" is-link />
        <van-cell title="意见箱" icon="gem" is-link />
        <van-cell title="加入茶师" icon="expand" is-link />
      </van-cell-group>
    </div>
    <!-- 退出登录 -->
    <div class="logout" v-if="userInfo.loginStatus">
      <van-button type="danger" @click="loginOut">退出登录</van-button>
    </div>
    <!-- 尾部tabbar -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import tabbar from "@/components/tabbar";
import { Cell, CellGroup, Button } from "vant";
import {mapMutations} from "vuex";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getUserInfo();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    ...mapMutations(['loginOut']),
    //去登录
    toLogin() {
      this.$router.push({ name: "PwdLogin" });
    },
    //获取登录信息
    getUserInfo() {
      let userInfo = JSON.parse(localStorage.getItem("userInfo")) || {};
      this.userInfo = userInfo;
    }
  },
  components: {
    tabbar,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.profile-container {
  padding-bottom: 51px;
}
.nav-bar {
  color: #fff;
  text-align: center;
  line-height: 46px;
  height: 46px;
  background-color: #b44f4b;
}
.header {
  height: 112px;
  color: #fff;
  background-color: #b44f4b;
}
.header > div {
  height: 100%;
}
.header .hasLogin {
  display: flex;
  align-items: center;
}
.header .hasLogin .user-avatar img {
  width: 76px;
  height: 76px;
  margin: 0 16px;
  border-radius: 50%;
}
.header .hasLogin .user-name {
  flex: 1;
}
.header .hasLogin .user-name p {
  margin-bottom: 12px;
}
.header .noLogin {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header .noLogin .btn {
  padding: 6px;
  font-size: 14px;
  background-color: rgb(170, 179, 55);
}
.list-title >>> .van-cell__value--alone {
  color: #f00 !important;
}
.divider {
  width: 100vw;
  height: 10px;
  background-color: #f5f5f5;
}
.profile-container >>> .van-cell__title {
  font-size: 14px;
  padding-left: 10px;
}
.profile-container >>> .van-cell__left-icon {
  color: #f00;
}
.logout {
  padding: 16px;
}
.logout >>> .van-button {
  width: 100%;
  border-radius: 20px;
}
.order-list {
  display: flex;
  padding: 8px 0;
}
.order-list .order-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20%;
  flex: 1;
}
.order-list .order-item img {
  width: 24px;
  height: 24px;
}
.order-list .order-item p {
  font-size: 14px;
  margin-top: 4px;
}
</style>